<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
<head>
<%@ include file="/WEB-INF/jsp/include/easyui.jsp" %>
<title>Grid表格表单生成器</title>
<script>
	var editIndex = undefined;
	var className = '${className}';
	var p = {
		gridUrl : "/console/modle/list" ,
		initUrl: "/console/modle/init",
		fieldUrl: "/console/modle/fieldList",
		gridToolbar : "#gridToolbar"
	};
	function endEditing(){
		if (editIndex == undefined){return true}
		if ($('#dataGrid').datagrid('validateRow', editIndex)){
			$('#dataGrid').datagrid('endEdit', editIndex);
			editIndex = undefined;
			return true;
		} else {
			return false;
		}
	}
	function onClickCell(index, field){
		if (editIndex != index){
			if (endEditing()){
				$('#dataGrid').datagrid('selectRow', index)
						.datagrid('beginEdit', index);
				var ed = $('#dataGrid').datagrid('getEditor', {index:index,field:field});
				if (ed){
					($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
				}
				editIndex = index;
			} else {
				setTimeout(function(){
					$('#dataGrid').datagrid('selectRow', editIndex);
				},0);
			}
		}
	}
	function accept(){
		if (endEditing()){
			$('#dataGrid').datagrid('acceptChanges');
		}
	}
	
	/** 
	 * 向上移动一行 
	 *  
	 * @param dg 
	 * @param row 
	 */  
	function moveupRow(dg, row) {  
	    var datagrid = $(dg);  
	    var index = datagrid.datagrid("getRowIndex", row);  
	    if (isFirstRow(dg, row)) {  
	        return;  
	    }  
	    datagrid.datagrid("deleteRow", index);  
	    datagrid.datagrid("insertRow", {  
	        index : index - 1, // 索引从0开始  
	        row : row  
	    });  
	    datagrid.datagrid("selectRow", index - 1);  
	}  
	/** 
	 * 向下移动一行 
	 *  
	 * @param dg 
	 * @param row 
	 */  
	function movedownRow(dg, row) {  
	    var datagrid = $(dg);  
	    var index = datagrid.datagrid("getRowIndex", row);  
	    if (isLastRow(dg, row)) {  
	        return;  
	    }  
	    datagrid.datagrid("deleteRow", index);  
	    datagrid.datagrid("insertRow", {  
	        index : index + 1, // 索引从0开始  
	        row : row  
	    });  
	    datagrid.datagrid("selectRow", index + 1);  
	  
	}  
	/** 
	 * 是否是第一条数据 
	 *  
	 * @param dg 
	 * @param row 
	 * @returns {Boolean} 
	 */  
	function isFirstRow(dg, row) {  
	    var index = $(dg).datagrid("getRowIndex", row);  
	    if (index == 0) {  
	        return true;  
	    }  
	    return false;  
	}  
	/** 
	 * 是否是最后一条数据 
	 *  
	 * @param dg 
	 * @param row 
	 * @returns {Boolean} 
	 */  
	function isLastRow(dg, row) {  
	    var rowNum = $(dg).datagrid("getRows").length;  
	    var index = $(dg).datagrid("getRowIndex", row);  
	    if (index == (rowNum - 1)) {  
	        return true;  
	    }  
	    return false;  
	}
	
	function inputSearchFormat (row){
		var input = "",inputName = row.field +"_searchType";
		switch(row.searchType){
			case 'like':input = "<input type=\"hidden\" name=\""+ inputName +"\" value=\"like\" />";break;
			case 'eq': 	input = "<input type=\"hidden\" name=\""+ inputName +"\" value=\"eq\" />"; 	break;
			case 'neq': input = "<input type=\"hidden\" name=\""+ inputName +"\" value=\"neq\" />"; break;
			case 'gt':  input = "<input type=\"hidden\" name=\""+ inputName +"\" value=\"gt\" />"; 	break;
			case 'ge':  input = "<input type=\"hidden\" name=\""+ inputName +"\" value=\"ge\" />"; 	break;
			case 'lt':  input = "<input type=\"hidden\" name=\""+ inputName +"\" value=\"lt\" />"; 	break;
			case 'le':  input = "<input type=\"hidden\" name=\""+ inputName +"\" value=\"le\" />"; 	break;
			default:break;
		}
		return input;
	} 
	
	function inputFormat (row){
		var input = "";
		var required = (row.required=='Y'?true:false) ;
		switch(row.type){
			case 'password':
				input = "  <input type=\"password\" class=\"easyui-textbox\" name=\""+ row.field +"\" style=\"width:240px;\" data-options=\"label:'"+ row.title +":',required:"+ required +"\" />";
				break;
			case 'text':
				input = "  <input class=\"easyui-textbox\" name=\""+ row.field +"\" style=\"width:240px;\" data-options=\"label:'"+ row.title +":',required:"+ required +"\" />";
				break;
			case 'textarea':
				input = "  <input class=\"easyui-textbox\" name=\""+ row.field +"\" style=\"width:240px;\" data-options=\"label:'"+ row.title +":',required:"+ required +",multiline:true\" />";
				break;
			case 'combobox':
				input = "  <select class=\"easyui-combobox\" name=\""+ row.field +"\" style=\"width:240px;\" data-options=\"label:'"+ row.title +":',required:"+ required +"\" ><option value=\"\">--请选择--</option></select>";
				break;
			case 'comboboxM':
				input = "  <select class=\"easyui-combobox\" name=\""+ row.field +"\" style=\"width:240px;\" data-options=\"label:'"+ row.title +":',required:"+ required +"\" multiple=\"multiple\"><option value=\"\">--请选择--</option></select>";
				break;
			case 'combotree':
				input = "  <select class=\"easyui-combotree\" name=\""+ row.field +"\" style=\"width:240px;\" data-options=\"label:'"+ row.title +":',required:"+ required +"\" ><option value=\"\">--请选择--</option></select>";
				break;
			case 'numberbox':
				input = "  <input class=\"easyui-numberbox\" name=\""+ row.field +"\" style=\"width:240px;\" data-options=\"label:'"+ row.title +":',required:"+ required +",min:0\" />";
				break;
			case 'datebox':
				input = "  <input class=\"easyui-datebox\" name=\""+ row.field +"\" style=\"width:240px;\" data-options=\"label:'"+ row.title +":',required:"+ required +"\" />";
				break;
			case 'datetimebox':
				input = "  <input class=\"easyui-datetimebox\" name=\""+ row.field +"\" style=\"width:240px;\" data-options=\"label:'"+ row.title +":',required:"+ required +"\" />";
				break;
			case 'filebox':
				input = "  <input class=\"easyui-filebox\" name=\""+ row.field +"\" style=\"width:240px;\" data-options=\"prompt:'Choose a file...',label:'"+ row.title +":',required:"+ required +"\" />";
				break;
			default:break;
		}
		return input;
	}
	
	/**自动创建表单*/
	function autoCreateForm(){
		var enctypeFile = "";
		var form = [];
		var formStart = "<form id=\"easyuiForm\" method=\"post\" action=\"/console/"+ className +"/newAdd#modify#\"  fileTag >";
		form.push(" <!--类名属性及默认主键id-->");
		form.push(" <input type=\"hidden\" name=\"className\" value=\""+ className +"\" />");
		form.push(" <input type=\"hidden\" name=\"id\" value=\"\" />");
		var data = p.dataGrid.datagrid("getData");
		var isNew = true;
		var rows = data.rows,row = null,input = '';
		for(var i=0,len=data.rows.length;i<len;i++){
			row = rows[i];
			if(i==0){ form.push(" <div style=\"margin-bottom:20px\">"); }
			//if(row.inform!="Y") continue;
			if(row.type=="filebox"){ 
				enctypeFile = "enctype=\"multipart/form-data\"" ;
			}
			input = inputFormat(row);
			if(i>0 && row.newline=="Y"){
				form.push(" </div>");
				form.push(" <div style=\"margin-bottom:20px\">");
			}
			form.push(input);
		}
		form.push(" </div>");
		form.push("</form>");
		formStart = formStart.replace("fileTag",enctypeFile);
		form.unshift(formStart);
		return form.join("\r\n") ;
	}
	
	/*自动动态创建表格*/
	function autoCreateGridJson(){
		var grid = { className:className };
		var columns = [];
		var queryForm = [];
		queryForm.push("<form id=\"queryForm\" >");
		queryForm.push(" <input type=\"hidden\" name=\"className\" value=\""+ className +"\" />");
		var data = p.dataGrid.datagrid("getData");
		$.each(data.rows,function(index,row){
			if(row.inlist=='Y'){
				columns.push({ field:row.field,width:row.width,title:row.title });
			} 
			if(row.insearch=='Y'){
				queryForm.push(" <div style=\"margin-top:5px;margin-left:10px;float:left;\">");
				queryForm.push(inputFormat(row));
				queryForm.push(inputSearchFormat(row));
				queryForm.push(" </div>");
			}
		});
		queryForm.push("</form>");
		grid.gridParam = {
			columns:[columns] ,
			url: ( "/console/"+className+"/list" ) ,
			gridDeleteUrl: ( "/console/"+className+"/delete" ) 
		};
		grid.queryForm = queryForm.join("\r\n");
		return grid ;
	}
	
	$(function(){
		/*
		* 表格数据
		*/
		p.dataGrid = $("#dataGrid").datagrid({
			fit: true,
			rownumbers: true,
			pagination: true,
			singleSelect: true, 
			url: p.fieldUrl,
			queryParams:{className: '${className}'},
			idField: "id",
			columns: [
			    [
			     	{title:"<b>基本信息</b>","colspan":2},
					{title:"<b>列表页设置</b>","colspan":4} ,
					{title:"<b>表单页设置</b>","colspan":7},
					{title:"<b>操作</b>","colspan":1}
				],
			    [
			     	{field:"field",title:"字段名",width:100, rowspan:1},
			     	{field:"title",title:"显示名",width:80, rowspan:1},
			     	{field:"inlist",title:"列表显示",width:60, rowspan:1,
			     		editor:{
			     			 type:'checkbox',  
			                 options:{ on: "Y",  off: "N" }  
			     		}
			     	},
			     	{field:"insearch",title:"搜索显示",width:60, rowspan:1,
			     		editor:{
			     			 type:'checkbox',  
			                 options:{ on: "Y",  off: "N" }  
			     		}
			     	},
			     	{field:"searchType",title:"搜索方式",width:100, rowspan:1,
			     		editor:{
			     			type:'combobox'	,
			     			options:{
				     			data:[
		     			       		{text:'like模糊', value:'like'},
		     			      		{text:'相等',   value:'eq'},
		     			      		{text:'不相等',   value:'neq'},
		     			      		{text:'大于',   value:'gt'},
		     			      		{text:'大于等于',   value:'gte'},
		     			      		{text:'小于',   value:'lt'},
		     			      		{text:'小于等于',   value:'lte'},
		     			      		{text:'包含',   value:'in'}
				     			],
								textField: 'text' ,
				     			valueField: 'value' ,
								required:true
			     			}
			     		}
			     	},
			     	{field:"width",title:"列表宽度",width:80,rowspan:1,
			     		editor:{
			     			type:'numberbox',
			     			options:{precision:0}
			     		}
			     	},
			     	{field:"type",title:"控件类型",width:120, rowspan:1,
			     		editor:{
			     			type:'combobox'	,
			     			options:{
				     			url: CP + '/console/modle/formItemList' ,
								textField: 'text' ,
				     			valueField: 'value' ,
								required:true 
			     			}
			     		}
			     	},
			     	{field:"fieldwidth",title:"控件宽度",width:80,rowspan:1,
			     		editor:{
			     			type:'numberbox',
			     			options:{precision:0}
			     		}
			     	},
			     	{field:"space",title:"间隔宽度",width:80,rowspan:1,
			     		editor:{
			     			type:'numberbox',
			     			options:{precision:0}
			     		}
			     	},
			     	{field:"inform",title:"表单显示",width:60, rowspan:1,
			     		editor:{
			     			 type:'checkbox',  
			                 options:{ on: "Y",  off: "N" }  
			     		}
			     	},
			     	{field:"newline",title:"是否新行",width:60, rowspan:1,
			     		editor:{
			     			 type:'checkbox',  
			                 options:{ on: "Y",  off: "N" }  
			     		}
			     	},
			     	{field:"required",title:"是否必填",width:60, rowspan:1,
			     		editor:{
			     			 type:'checkbox',  
			                 options:{ on: "Y",  off: "N" }
			     		}
			     	},
			     	{field:"dataoptions",title:"数据属性",width:150, rowspan:1,
			     		editor:{
			     			type:'combobox'	,
			     			options:{
				     			data:[
		     			       		{text:"多选", value:"multiple:true"},
		     			      		{text:"数据请求",   value:"url:''"}
				     			],
								textField: 'text' ,
				     			valueField: 'value' ,
								multiple:true 
			     			}
			     		}
			     	},
			     	{field:"opt",title:"操作",width:130, rowspan:1,
			     		formatter:function(value,row){
			     			return '<a href="#" onclick="accept();">切换</a> ';
			     		}
			     	}
			    ]
			],
			onBeforeSelect: function(row){
			},
			onLoadSuccess:function(data){
			},
			toolbar: p.gridToolbar,
			onEndEdit:function(index, row){
				
			},
			onClickCell: onClickCell
		});
		
		/*
		* 事件
		*/
		$(".easyui-linkbutton").on("click",function(){
			accept();
			var id = $(this).attr("id");
			switch(id){
				case  'b_1':
					var gridJson = p.dataGrid.datagrid("getData");
					var url = '/console/modle/'+className+'/gridConfig'; //设置参数
					var url2 = '/console/modle/'+className+'/grid';	//预览列表
					var data = { gridJson: JSON.stringify(gridJson) } ;
					$.ajax({
						type: "POST", url: url,  data: data , dataType: "json",
						success: function(json){
						 	if(json=="s") window.parent.consoleFn.addTab("Grid预览","gridView_0",url2);
						}
					});
					break;
				case 'b_2':
					var html= autoCreateForm();
					$("#viewForm").html(html);
					$.parser.parse('#viewForm');  
					var dialog = $('#dialog2').dialog({
						buttons:[
	                        {text:"关闭",iconCls: "icon-no",  handler:function(){
	                            	dialog.dialog('close');
	                            }
		               		}
	                	]
					});
					break;
				case 'b_3':
					var html = [];
					var gridJson = autoCreateGridJson();
					var queryForm = gridJson.queryForm;
					var gridParam = gridJson.gridParam;
					gridParam = JSON.stringify(gridParam);
					html.push(gridParam);
					html.push("\r\n");
					html.push(queryForm);
					html = html.join("\r\n");
					$("#jsonViewer").html(html);
					var dialog = $('#dialog').dialog({
						title:"Grid HTML&JSON输出",
						buttons:[
	                        {text:"关闭",iconCls: "icon-no",  handler:function(){
	                            	dialog.dialog('close');
	                            }
		               		}
	                	]
					});
					break;
				case 'b_4':
					var html= autoCreateForm();
					$("#jsonViewer").html(html);
					var dialog = $('#dialog').dialog({
						title:"Form HTML&JSON输出",
						buttons:[
	                        {text:"关闭",iconCls: "icon-no",  handler:function(){
	                            	dialog.dialog('close');
	                            }
		               		}
	                	]
					});
					break;
				case 'b_5':
					var row = p.dataGrid.datagrid("getSelected");
					moveupRow("#dataGrid",row);
					break;
				case 'b_6':
					var row = p.dataGrid.datagrid("getSelected");
					movedownRow("#dataGrid",row);
					break;
				default:break;
			}
		});
	});
</script>
</head>
<body class="easyui-layout">
		<div id="gridToolbar">
			<div class="gridButtons" class="easyui-panel" style="padding: 1px;">
	       		<a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" id="b_1">grid列表预览</a>
	       		<a href="#" class="easyui-linkbutton" iconCls="icon-print" plain="true" id="b_3">grid列表视图</a>
	       		
	       		
	       		<a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" id="b_2">form表单预览</a>
	       		<a href="#" class="easyui-linkbutton" iconCls="icon-print" plain="true" id="b_4">form表单视图</a>
	       		
	       		<a href="#" class="easyui-linkbutton" iconCls="icon-arrow-up" plain="true" id="b_5">上移</a>
	       		<a href="#" class="easyui-linkbutton" iconCls="icon-arrow-down" plain="true" id="b_6">下移</a>
			</div>
		</div>
		
		<div region="center" border="false" title="表格设计器">
			<table id="dataGrid"></table>
		</div>
		
		<div id="dialog" title="Grid HTML&JSON输出" style="width:600px;height:500px;display: none;">
    		<textarea id="jsonViewer" style="width: 100%;height: 100%;"></textarea>
		</div>
		<div id="dialog2" title="表单预览" style="width:600px;height:500px;display: none;">
    		<div id="viewForm" class="easyui-panel" style="padding: 15px;border: 0;"></div>
		</div>
		
		<div id="win" title="Grid预览" style="width:600px;height:500px;display: none;">
		</div>
</body>
</html>